<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css">
    <link rel="stylesheet" href="/lib/public.css" media="all">
    <link rel="stylesheet" href="/lib/bootstrap.min.css"/>
    <link rel="stylesheet" href="/lib/bootstrapValidator.css"/>

</head>
    <body>

    <div class="layuimini-container">
        <div class="layuimini-main">

    <form class="layui-form" id="updateForm" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">类别名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入类别名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类别描述</label>
            <div class="layui-input-block">
                <input type="text" name="dscp" required  lay-verify="required" placeholder="请输入类别描述" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类别图片</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1" style="width: 95px;height: 95px">
                        <p id="demoText"></p>
                    </div>
                    <div style="width: 95px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级类别</label>
            <div class="layui-input-block">
                <select name="parentId" id="all_parent_select" lay-verify="required">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否推荐</label>
            <div class="layui-input-block">
                <input type="radio" name="recom" value="0" title="不推荐" checked>
                <input type="radio" name="recom" value="1" title="推荐" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否上架</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="不上架" checked>
                <input type="radio" name="status" value="0" title="上架" >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input TYPE="hidden" name="id" >
                <input TYPE="hidden" name="pic" id="categoryPic">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

        </div>
    </div>

<script src="/lib/layui-v2.6.3/layui.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/bootstrapValidator.css"></script>
<script id="all_parent" type="text/html">
    <option value="0">--请选择父分类--</option>
    {{#  layui.each(d.data, function(index, item){ }}
    <option value="{{item.id}}">{{item.name}}</option>
    {{#  }); }}
</script>
<script>
    //Demo
    layui.use(['form','laytpl','upload', 'element', 'layer'], function(){
        var form = layui.form,
            $=layui.$,
            laytpl=layui.laytpl,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer;


        //下拉框
        $.ajax({
            url:"/api/category",
            type:"GET",
            dataType:"JSON",
            success:function (resp) {
                console.log(resp);
                let tpl = $("#all_parent").html();
                laytpl(tpl).render(resp, function(html) {
                    $("#all_parent_select").html(html);
                });
                form.render();

                let id = sessionStorage.getItem("id");
                $.ajax({
                    url:`/api/category/${id}`,
                    type:"GET",
                    dataType:"JSON",
                    success:function (resp) {
                        /*layer.msg(resp);*/
                        let data = resp.data;
                        $("input[name='id']").val(data.id);
                        $("input[name='name']").val(data.name);
                        $("input[name='dscp']").val(data.dscp);
                        $("#demo1").attr("src",`/upload/${data.pic}`);
                        $("#categoryPic").val(data.pic);
                        element.progress('demo','100%');
                        $(`#all_parent_select option[value=${data.parentId}]`).attr("selected",true);
                        $(`input[type='radio'][name=recom][value='${data.recom}']`).attr("checked",true);
                        $(`input[type='radio'][name=status][value='${data.status}']`).attr("checked",true);

                        form.render();
                    }
                })
            }

        })

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadBtn'
            ,url: '/api/pic/upload', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                console.log(res);
                $("#categoryPic").val(res.data);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        //提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url:"/api/category",
                type: "PUT",
                data: JSON.stringify(data.field),
                contentType:"application/json;charset=UTF-8",
                dataType: "JSON",
                success: function (resp){
                    layer.msg(resp.msg,{time: 1000},function (){
                        if (resp.code === 10000){
                            parent.layer.closeAll("iframe");
                        }
                    })

                }
            })
            return false;
        });

        form.render();

    });
</script>
</body>
</html>